<template>
	<div>htmlTag-你可能不知道的强大 HTML 属性</div>

	<a href="../assets/logo.png" download="logo.png">logo</a>
	<img src="../../public/favicon.ico" />
	<a href="../../public/favicon.ico" download="favicon.ico">favicon.ico</a>
	<a ref="myRef" href="" download="logo.png">logo</a>
	<a href="/i/w3school_logo_white.gif" download="w3logo">
	<img border="0" src="/i/w3school_logo_white.gif" alt="W3School">
	</a>
	<button @click.native="exportData()">a标签下载网络图片-目前无效</button>
	
	<div>可以编辑</div>
	<div contenteditable="true">
	  This text can be edited by the user.
	</div>
	
	<div>multiple 属性是一个布尔属性。当存在时，它指定用户可以一次选择多个选项</div>
	<label for="tech">Choose a technology:</label>
	
	<select name="tech" id="tech" multiple>
	  <option value="angular">Angular</option>
	  <option value="react">React</option>
	  <option value="vue">vue</option>
	</select>

	<!-- or -->
	<input type="file" multiple>
	
	<div>poster 属性指定了在视频下载时或用户点击播放按钮前显示的图像。如果不包括这个，将使用视频的第一帧来代替。</div>
	<video  poster="../assets/logo.png">
	  <source src="trailer.mp4" type="video/mp4">
	</video>
	<div>img标签帮助快速获取图片的src地址</div>
	<img alt="Vue logo" src="../assets/logo.png" />
	
	<p hidden>You won't see me on the browser, only developers can!</p>
	
	<div>accept 属性指定用户可以从文件输入对话框中选择的文件类型的过滤器。accept 属性只能与 <input type="file"> 一起使用。</div>
	<form action="/...">
	  <label for="img">Select image:</label>
	  <input type="file" id="img" name="img" accept="image/*">
	  <input type="submit">
	</form>
	
	<!-- or -->
	
	<input type="file" accept=".jpg, .png" >
	
</template>

<script scoped="scoped">
	import {
		ref,
		reactive
	} from 'vue'
	import logo from '../assets/logo.png'
	export default {
		setup() {
			const myRef = ref(null);
			return {
				myRef
			}
		},
		data() {
			return {}
		},
		mounted() {},
		methods: {
			exportData() {
				console.log('myRef',this.myRef)
				var a=this.myRef
				a.href = "https://vuejs.org/images/logo.png";
				// a.href = "../../public/favicon.ico";
				a.download = 'filename';
				a.click();
			}
		},

	}
</script>

<style scoped="scoped">
	*{
		font-size: 18px;
	}
	a {
		display: block;
		margin: 6px;
	}
</style>
